<template>
  <div class="Land">
    <div class="ctn">
      <div class="ctnInfo">
        <div class="ctnBox">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="房客登录" class="fangzhudl" name="second">
              <el-form
                :model="ruleForm2"
                status-icon
                :rules="rules2"
                ref="ruleForm2"
                class="demo-ruleForm"
              >
                <div class="xingming">
                  <el-form-item label="请输入用户名" prop="name">
                    <el-input v-model="ruleForm2.name"></el-input>
                  </el-form-item>
                </div>
                <el-form-item label="请输入密码" prop="pass">
                  <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item class="tijiao">
                  <el-button type="primary" @click="submitForm('ruleForm2')" class="tijiao-anniu">提交</el-button>
                  <el-button @click="resetForm('ruleForm2')" class="chongzhi-anniu">重置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="房主登录" class="yonghudl" name="first">
              <el-form
                :model="ruleForm2"
                status-icon
                :rules="rules2"
                ref="ruleForm2"
                class="demo-ruleForm"
              >
                <div class="xingming">
                  <el-form-item label="请输入房主名" prop="name">
                    <el-input v-model="ruleForm2.name"></el-input>
                  </el-form-item>
                </div>
                <el-form-item label="请输入密码" prop="pass">
                  <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
                </el-form-item>
                <!-- <el-input
                  placeholder="请输入内容"
                  style="width:300px;"
                  v-model="input3"
                  class="input-with-select"
                >
                  <el-select v-model="select" slot="prepend" placeholder="+86" style="width:80px; ">
                    <el-option label="餐厅名" value="1"></el-option>
                    <el-option label="订单号" value="2"></el-option>
                    <el-option label="用户电话" value="3"></el-option>
                  </el-select> -->
                  <!-- <el-button slot="append" placeholder="获取手机验证码" style="width:180px;"></el-button> -->
                  <!-- <el-button slot="append" lable="请输入内容" style="width:300px;"></el-button> -->
                </el-input>
                <el-form-item class="tijiao">
                  <el-button type="primary" @click="submitForm('ruleForm2')" class="tijiao-anniu">提交</el-button>
                  <el-button @click="resetForm('ruleForm2')" class="chongzhi-anniu">重置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
#lo {
  color: #00848a;
}
.xingming {
}
html,
body {
  width: 100%;
  height: 100%;
  /* background: url(../../build/beijin.jpg) no-repeat; */
  background-size: 100% 100%;
}
#app .topzi {
  font-size: 40px;
  margin-bottom: 20px;
}
#app .Land {
  width: 30%;
  position: fixed;
  top: 20%;
  left: 0;
  right: 0;
  margin: 0 auto;
  border: 1px solid #000;
  padding: 40px;
}
.tijiao {
  margin-top: 38px;
  width: 100%;
  height: 41px;
  text-align: center;
}
.tijiao-anniu,
.chongzhi-anniu {
  width: 187px;
  height: 41px;
}
.tijiao-anniu {
  background: #00848a;
}
.tijiao-anniu:hover {
  background: #00848a;
}
</style>
<script>
export default {
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("账号不能为空"));
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm2.checkPass !== "") {
          this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {};
    return {
      input3: "",
      input2: "",
      activeName: "second",
      ruleForm2: {
        pass: "",
        checkPass: "",
        name: ""
      },
      rules2: {
        pass: [
          { required: true, validator: validatePass, trigger: "blur" },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
            message: "密码必须是6-16位数字和字母的组合",
            trigger: "blur"
          }
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" }
        ],
        name: [
          { required: true, message: "不能为空", trigger: "blur" },
          {
            pattern: /^[\u4E00-\u9FA5]+$/,
            message: "用户名只能为中文",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("登录成功，即将返回首页");
          this.$router.push({ path: "/HelloWorld" });
        } else {
          console.log("error submit!!");
          // return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>